<template>
	<cover :isShow='true' title='商品管理' @hiden='black'>
		
		<cover :isShow='Edit_show' title='编辑管理' @hiden='closeCover'>
			<PushList 
				v-if="Edit_show"
				btnName="保存编辑" 
				@response="UpData" 
				:title='list.title' 
				:imgs='list.images' 
				:genre='list.genre'
				:price='list.price' :sum='list.sum'>
			</PushList>
		</cover>
		<div class="listBox">
			<Scroll @Scroll='move' :Pull='true' @Pull='Pull'>
				<waterfall v-if="commodity.length!=0" >
					<div class="list" v-for="(item,index) in commodity">
							<CommodityDisplay 
								:genre='item.genre' 
								:title='item.title' 
								:price='item.price'
								:images='item.images.slice(0,1)' 
								:sum='item.sum' 
								:index='index'
								@Edit='edit' @Drop='Drop' />
					</div>
				</waterfall>
				<h3 style="color:#999;text-align: center;line-height: 3em;" v-else>
					暂无数据
				</h3>
				<Footer></Footer>
			</Scroll>
		</div>
	</cover>
</template>

<script>

	import {
		useStore
	} from 'vuex';
	
	//element-ui
	import { ElMessage, ElMessageBox } from 'element-plus'
	import Footer from '../footer/index.vue'
	import cover from '../../common/cover/index.vue'
	import CommodityDisplay from '../../common/CommodityDisplay/index.vue'
	//瀑布流
	import Scroll from '../../common/scroll/index.vue'
	//节流器
	import _ from '@assets/tools/throttle.js'
	import waterfall from '../../common/waterfall/index.vue'
	import {Edit,Drop as Droplist} from '@assets/request/setData'
	
	//cover loading
	import {CoverLoading} from '@assets/tools/CoverLoading.js'
	
	//请求数据
	import {
		defineComponent,
		ref,
		reactive,
		inject,
		onMounted
	} from 'vue';
	//路由
	import {
		useRouter,
	} from 'vue-router';
	
	//商品编辑
	import PushList from '../../common/publish/index.vue'
	//返回数组中对象
	function FindObj(arr, condition) {
		var obj = {};
		arr.forEach(item => {
			var flag = true;
			for (var key in condition) {
				if (condition[key] != item[key]) flag = false;
			}
			if (flag) obj = item;
		})
		return obj;
	}
	export default defineComponent({
		components: {
			CommodityDisplay,
			cover,
			waterfall,
			Footer,
			PushList,
			Scroll
		},
		setup() {
			var store = useStore()
			var router = useRouter()
			var Edit_show = ref(false)
			//商品默认信息
			var list = reactive({
				genre: '',
				title: 'yes',
				price: 0,
				images: [],
				sum: 0
			})
			//页面数据
			var getPageData = store.getters.getPageData;
			//截取数据条数
			var DataLen=0;
			//渲染数据
			var commodity=reactive(getPageData.commodity.slice(DataLen,DataLen+=10))
			//追加数据
			var pushList=_((bs)=>{
				if(getPageData.commodity.length<=DataLen) return;
				var list = getPageData.commodity.slice(DataLen,DataLen+=10)
				list.forEach(item=>{
					commodity.push(item)
				})
				//由于vue 机制 必须放在 宏队列中 否则dom 还未渲染就会执行
				setTimeout(()=>{
					bs.refresh()
				})
			})
			//懒加载
			function move(e,bs){
				var {y,height}=e;
				y*=-1;
				if(y>=height/2){
					pushList(bs)
				}
			}
			//返回上一页
			function black() {
				router.go(-1)
			}
			//打开cover
			function openCover() {
				Edit_show.value = true;
			}
			//关闭cover closeCover
			function closeCover() {
				Edit_show.value = false;
			}
			//编辑
			function edit(data) {
				var aa = FindObj(getPageData.commodity, {
					genre: data.genre,
					title: data.title,
					price: data.price
				})
				list.images = aa.images;
				list.title = aa.title;
				list.genre = aa.genre
				list.price = aa.price;
				list.sum = aa.sum;
				list.index=data.index
				openCover()
			}
			
			
			//下架
			async function Drop(data) {
				var result=await Droplist(data)
			
				// console.log('夏季',commodity[)
				if(result.data.state==200){
					commodity.splice(data.index,1)
					ElMessage({
					  type: 'success',
					  message: result.data.msg,
					})
				}else{
					ElMessage({
					  type: "error",
					  message: result.data.msg,
					})
				}
			}
			//修改数据
			async function UpData(data) {
				CoverLoading('资源处理中....')
				CoverLoading('资源处理中!')
				CoverLoading.close()
				CoverLoading('资源处理中!!@')
				data.images=await data.GetImgs;
				data.images=JSON.stringify(data.images)
				CoverLoading('上传中....')
				var result= await Edit({index:list.index,...data})
				CoverLoading.close()
				if(result.data.state==200){
					ElMessage({
					  type: 'success',
					  message:result.data.msg ,
					})
				}else{
					ElMessage({
					  type: 'info',
						message:result.data.msg ,
					})
				}
			}
			//下拉加载...
			function Pull(close){
				setTimeout(()=>{
					router.go(0)
					close()
				},1000)
			}
			return {
				black,
				Edit_show,
				UpData,
				openCover,
				closeCover,
				commodity,
				edit,
				Drop,
				list,
				move,
				Pull
			}
		}
	})
</script>

<style scoped="scoped">
	.listBox {
		width: 100vw;
		height: calc(100vh - 2.5em);
		background-color: #f1f1f1;
		user-select: none;
		overflow: hidden;
	}
	.list {
		width: 90vw;
		max-width: 300px;
		height: 330px;
		display: block;
		background-color: #fff;
		margin-top: 2vh;
	}
</style>
